<template>
  <view class="video-wrok bg-white mt-[30rpx] px-[18rpx] box-border">
    <view class="video-content flex justify-between"> </view>
    <div class="image-text-list">
      <div class="flex flex-col" v-for="item in workList" :key="item.id">
        <view
          class="w-full h-[214rpx] mt-25rpx flex p-[8rpx] img-box rounded-[20rpx] bg-white box-border"
        >
          <view
            class="img-text w-[100%] bottom-0 text-black px-[12rpx] py-[8rpx] box-border"
          >
            <view class="text-[28rpx] mb-[18rpx]">{{ item.title }}</view>
            <view class="text-[20rpx] text-[#A6A6A6] h-[54rpx]">{{
              item?.description
                .replace(/<[^>]+>/g, "") // 去除所有HTML标签
                .slice(0, 12) + // 截取前12个字符
              (item?.description.replace(/<[^>]+>/g, "").length > 12
                ? "..."
                : "")
            }}</view>
            <view
              class="flex justify-between text-[#A6A6A6] text-[18rpx] mt-[16rpx]"
            >
              <text class="">{{ item.title }}</text>
            </view>
          </view>
          <image
            mode="aspectFill"
            class="w-[363rpx] h-[100%] rounded-[20rpx] image"
            :src="item.coverImage?.split(',')[0]"
          />
        </view>
        <view class="admin-actions flex justify-around p-10rpx">
          <button
            class="w-1/3 mr-10rpx btn-primary"
            @click="
              handleUpdateInfo({ type: 'top', id: item.id, title: '置顶' })
            "
            size="mini"
            v-show="
              item.isTop === 0 &&
              (superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role))
            "
          >
            置顶
          </button>

          <button
            class="w-1/3 mr-10rpx btn-info"
            @click="
              handleUpdateInfo({
                type: 'untop',
                id: item.id,
                title: '取消置顶',
              })
            "
            size="mini"
            v-show="
              item.isTop === 1 &&
              (superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role))
            "
          >
            取消置顶
          </button>

          <button
            @click="
              handleUpdateInfo({
                type: 'publish',
                id: item.id,
                title: '上架',
              })
            "
            v-if="item.putState === 0"
            :class="{
              'w-1/2': !(
                superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role)
              ),
              'w-1/3':
                superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role),
            }"
            class="mr-10rpx btn-success"
            size="mini"
          >
            上架
          </button>
          <button
            @click="
              handleUpdateInfo({
                type: 'unpublish',
                id: item.id,
                title: '下架',
              })
            "
            v-if="item.putState === 1"
            :class="{
              'w-1/2': !(
                superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role)
              ),
              'w-1/3':
                superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role),
            }"
            class="mr-10rpx btn-secondary"
            size="mini"
          >
            下架
          </button>
          <button
            :class="{
              'w-1/2': !(
                superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role)
              ),
              'w-1/3':
                superManagerPermission(userInfo?.role) ||
                managerPermission(userInfo?.role),
            }"
            class="mr-10rpx btn-danger"
            @click="handleDelete(item.id)"
            size="mini"
          >
            删除
          </button>
        </view>
      </div>
    </div>
  </view>
</template>
<script lang="ts" setup>
import { defineProps, ref, onMounted } from "vue";
import { getActivityParticipationPage } from "@/service/my";
import {
  removeActivityParticipation,
  updateActivityParticipationInfo,
} from "@/service/home";
import { superManagerPermission, managerPermission } from "@/utils";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store";

const userStore = useUserStore();

const { userInfo } = storeToRefs(userStore);

const props = defineProps<{
  detailData: any;
}>();
const workList = ref<any>([]);
const getList = async () => {
  try {
    const showData: any = await getActivityParticipationPage({
      current: 1,
      size: "1000",
    });
    workList.value = showData.data.records;
  } catch (error) {}
};

onShow(() => {
  getList();
});

const handleUpdateInfo = ({
  type, // 上架: publish 下架：unpublish 置顶：top 取消置顶：untop
  id,
  title, // 上架、下架、置顶、取消置顶
}) => {
  const params = {
    id,
  };
  if (type === "publish") {
    params.putState = 1;
  }
  if (type === "unpublish") {
    params.putState = 0;
  }
  if (type === "top") {
    params.isTop = 1;
  }
  if (type === "untop") {
    params.isTop = 0;
  }
  uni.showModal({
    title: `确定${title}`,
    content: `确定要${title}这个作品？`,
    success: async (res) => {
      if (res.confirm) {
        await updateActivityParticipationInfo(params);
        getList();
      }
    },
  });
};

const handleDelete = (id: number) => {
  uni.showModal({
    title: "确认删除",
    content: "确定要删除这个作品？",
    success: async (res) => {
      if (res.confirm) {
        // 调用API接口
        await removeActivityParticipation({ ids: id.toString() });
        getList();
      }
    },
  });
};
</script>
<style lang="scss" scoped>
.video-wrok {
  .video-content {
    position: relative;
    .doc {
      background: rgba(200, 255, 122, 1);
    }
    .date-m {
      position: relative;
      top: 2rpx;
      margin-left: 8rpx;
      color: rgba(27, 27, 27, 0.4);
    }
  }
  .img-box {
    border: 1px solid rgba(81, 117, 30, 0.09);
    .img-text {
      line-height: 1.3;
    }
    .image {
      flex-shrink: 0;
    }
  }
}
</style>
